{% extends 'base.html' %}
{% load static %}

{% block title %}{{ profile_user.nickname|default:profile_user.username }}的主页 - 本地有约{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-4 mb-4">
            <!-- 用户信息卡片 -->
            <div class="card shadow">
                <div class="card-body text-center">
                     {% if profile_user.avatar %}
                        <img src="{{ profile_user.get_avatar_url }}"
                             class="user-avatar-large mb-3"
                             alt="{{ profile_user.username }}"
                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;"
                             onerror="this.src='{% static 'imgs/default-avatar.jpg' %}'">
                     {% else %}
                        <!-- 统一的默认头像显示 -->
                        <img src='{% static 'imgs/default-avatar.jpg' %}'
                             class="user-avatar-large mb-3"
                             alt="{{ profile_user.username }}"
                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;">
                    {% endif %}
                    
                    <h4>{{ profile_user.nickname|default:profile_user.username }}</h4>
                    
                    {% if profile_user.signature %}
                    <p class="text-muted">{{ profile_user.signature }}</p>
                    {% endif %}
                    
                    <div class="mb-3">
                        <span class="badge
                            {% if profile_user.user_type == 'super_admin' %}bg-danger
                            {% elif profile_user.user_type == 'admin' %}bg-warning
                            {% else %}bg-primary{% endif %}">
                            {{ profile_user.get_user_type_display }}
                        </span>
                    </div>

                    <div class="mb-3">
                        {% if profile_user.show_email %}
                        <p><i class="bi bi-envelope"></i> {{ profile_user.email }}</p>
                        {% endif %}
                        {% if profile_user.show_phone and profile_user.phone %}
                        <p><i class="bi bi-phone"></i> {{ profile_user.phone }}</p>
                        {% endif %}
                    </div>

                    <!-- 关注按钮和私信按钮 -->
                    {% if user.is_authenticated and user.id != profile_user.id %}
                    <div class="d-flex gap-2 justify-content-center">
                        <button class="btn {% if is_following %}btn-secondary{% else %}btn-outline-secondary{% endif %} btn-follow-user"
                                data-user-id="{{ profile_user.id }}">
                            <i class="bi {% if is_following %}bi-check{% else %}bi-plus{% endif %}"></i>
                            {% if is_following %}已关注{% else %}关注{% endif %}
                        </button>
                        <!-- 修复这里的 URL 名称 -->
{#                        <a href="{% url 'social:message_detail' profile_user.id %}" class="btn btn-outline-primary">#}
{#                            <i class="bi bi-envelope"></i> 私信#}
{#                        </a>#}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- 用户创建的活动 -->
            <div class="card shadow">
                <div class="card-header">
                    <h5><i class="bi bi-calendar-event"></i> 创建的活动</h5>
                </div>
                <div class="card-body">
                    {% if created_activities %}
                    <div class="list-group">
                        {% for activity in created_activities %}
                        <a href="{% url 'activities:activity_detail' activity.id %}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ activity.title }}</h6>
                                    <small class="text-muted">
                                        <i class="bi bi-calendar"></i> {{ activity.start_time|date:"Y-m-d H:i" }}
                                    </small>
                                </div>
                                <span class="badge bg-success">{{ activity.get_status_display }}</span>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted">该用户还没有创建任何活动</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 关注/取消关注功能
    $('.btn-follow-user').click(function() {
        var userId = $(this).data('user-id');
        var $btn = $(this);
        var isFollowing = $btn.hasClass('btn-secondary');
        var url = isFollowing ? '/social/unfollow/' + userId + '/' : '/social/follow/' + userId + '/';
        
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    if (response.action === 'followed') {
                        $btn.html('<i class="bi bi-check"></i> 已关注').removeClass('btn-outline-secondary').addClass('btn-secondary');
                    } else {
                        $btn.html('<i class="bi bi-plus"></i> 关注').removeClass('btn-secondary').addClass('btn-outline-secondary');
                    }
                } else {
                    alert(response.message);
                }
            },
            error: function() {
                alert('操作失败，请重试');
            }
        });
    });
});
</script>
{% endblock %}